<template>
  <div id="aside">
    <div class="aside-logo">
      <img class="logo-img" src="@/assets/logo.png" alt="">
      <span :class="[!sidebar.isCollapse ? 'logo-title' : 'logo-title1',]">龙出东方</span>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#001529"
      text-color="#fff"
      active-text-color="#1890ff"
      :collapse="sidebar.isCollapse"
      router
    >
      <SidebarItem v-for="route in menuData" :key="route.path" :item="route"/>
    </el-menu>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { useStore } from 'vuex';
  import SidebarItem from '@/components/SidebarItem/index.vue';
  export default defineComponent({
    name: "AsideMenu",
    setup() {
      const store = useStore()
      const sidebar = computed(() => store.state.app.sidebar)
      const menuData = store.state.user.routes.filter((item:any) => {
        return item.path === '/'
      })[0].children

      return {
        sidebar,
        menuData
      }
    },
    components: {
      SidebarItem
    }
  })
</script>

<style lang="less" scoped>
  #aside {
    height: 100vh;
    background-color: #001529;
    .aside-logo {
      height: 50px;
      padding: 0 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      .logo-img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }
      transition: display 5s;
      .logo-title {
        width: 100px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        transition: width .5s;
      }
      .logo-title1 {
        width: 0;
        transition: width .5s;
      }

    }
    /deep/.el-menu {
      border-right: none;
    };
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
    }
  }
</style>
